import Vue from 'vue'
import Component from 'vue-class-component'
import './productStyle.css'

@Component({
  props: {
    isSelect: Boolean,
    value: Object,
    selectArr: Array
  }
})

export default class ProdcutCopyItemClass extends Vue {
  select = false

  created () {
    if (this.selectArr && this.selectArr.length > 0) {
      for (let obj of this.selectArr) {
        if (obj.productId === this.value.productId) {
          this.select = true
          return
        } else {
          this.select = false
        }
      }
    }
  }
  handlerSelect () {
    this.select = !this.select
    this.$emit('selected', this.value, this.select)
  }

  render () {
    return (
      <dl class = 'productFlowItemClass' style='position:relative' onClick={this.handlerSelect}>
        <dt><img src = {this.value.productCover + '?x-oss-process=image/resize,m_pad,h_400,w_400,color_ffffff/quality,Q_80/format,jpg'}/></dt>
        <dd>
          <p class="textOneLine">{this.value.designerName}</p>
          <p class="textOneLine">{this.value.productName}</p>
          <p class="showPrice">{this.value.currencyLogo}{this.value.showPrice}</p>
          <span style='position:absolute;right:0;bottom:0'>{this.select ? <icon name='selectedIcon' scale='2.5'/> : <icon name='unSelectedIcon' scale='2.5'/>}</span>
        </dd>
      </dl>
    )
  }
}
